<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>


<script>
    // es5以前，因为if for没有块级作用域的概念，需要借助function的作用域来限制变量范围
    // es6加入if for 块级作用域的概念
    //1.看变量在什么范围可用
    {
        var name1 = 'aaa';
        console.log(name1);
    }
    console.log(name1);

    //2.没有块级作用域引起的问题
    if(true){
        var name2 = 'bbb';
        func = function () {
            console.log(name2);
        }
    }

    if(true){
        name2 = 'bbb2';
        func();
    }
    //打印结果为bbb2，但想要的是bbb

    //3.for的作用域
    var btns = document.getElementsByTagName('button');
    for(let i = 0; i < btns.length; i++){
        btns[i].addEventListener('click', function () {
            console.log("第" + i + "个按钮被点击了");
        })
    }

</script>

</body>
</html>